<template>
    <div>
        <router-link :to ="path" class="wrapper" >
            <i class="icon">  {{ iconText }}</i>
            <p class="text">
                <slot></slot>
            </p>
        </router-link>
    </div>
</template>

<script>


export default ({
    setup() {
        
    },
    props:{
        iconText:String,
        path:String
    }
})
</script>

<style lang="less" scoped>
    .wrapper{
        font-size: .12rem;
        .icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: .25rem;
            height: .25rem;
            background: #999;
            color: #fff;
            border-radius: 50%;
            transition: all 0.5s;

        }
        .text{
            text-align: center;
            margin-top: 0.02rem;
            color: #999;
            transition: all 0.5s;
        }
        &.router-link-active{
            .icon{
                background-color: #fc770b;
                color: #fff; 
            }
            .text{
                color:#fc770b
            }
        }
    }

</style>
